<template>
  <!-- 查询 -->
  <el-form :inline="true" :model="frontendData.queryData">
    <el-form-item label="姓名">
      <el-input v-model="frontendData.queryData.name" />
    </el-form-item>
    <el-form-item label="交易状态">
      <el-select v-model="frontendData.queryData.trascStatus" placeholder=" ">
        <el-option label="盈亏平衡" value="盈亏平衡" />
        <el-option label="已盈利" value="已盈利" />
        <el-option label="已亏损" value="已亏损" />
      </el-select>
    </el-form-item>
  </el-form>
  <el-form>
    <el-form-item>
      <el-button type="primary" @click="reqGetUserList">查询</el-button>
      <el-button plain @click="resetInput">重置</el-button>
      <el-button type="primary" @click="addBoxSwitch = true"
        >新增用户</el-button
      >
    </el-form-item>
  </el-form>

  <!-- 用户列表 -->
  <el-table
    :data="backendData.listData"
    style="width: 100%"
    :header-cell-style="{ 'text-align': 'center', background: '#fafafa' }"
    :cell-style="{ 'text-align': 'center' }"
  >
    <el-table-column prop="name" label="姓名" width="auto" />
    <el-table-column prop="ttlInc" label="总收入" width="auto" />
    <el-table-column prop="ttlSpd" label="总支出" width="auto" />
    <el-table-column fixed="right" label="操作" width="auto">
      <template v-slot="scope">
        <el-button type="primary" link @click="reqGetUserDtl(scope.row.name)"
          >详情</el-button
        >
        <el-button type="primary" link @click="reqDeleteUser(scope.row.name)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增用户 -->
  <el-dialog v-model="addBoxSwitch" title="新增用户" :show-close="false" center>
    <el-form :inline="false" :model="frontendData.addData">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:">
            <el-input
              v-model="frontendData.addData.name"
              placeholder="请输入姓名"
              style="width: auto"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注:">
            <el-input
              v-model="frontendData.addData.rmk"
              placeholder="请输入备注信息"
              style="width: auto"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addBoxSwitch = false">取消</el-button>
        <el-button type="primary" @click="reqAddUser">提交</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改用户 -->
  <el-dialog
    v-model="updBoxSwitch"
    :title="property.dialogTitle"
    :show-close="false"
    center
  >
    <el-form :inline="false" :model="backendData.dtlData">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:">
            <el-input
              :value="backendData.dtlData.name"
              style="width: auto"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="总收入:">
            <el-input
              :value="backendData.dtlData.ttlInc"
              style="width: auto"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="交易状态:">
            <el-input
              :value="backendData.dtlData.trascStatus"
              style="width: auto"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注:">
            <el-input
              v-model="backendData.dtlData.rmk"
              :value="backendData.dtlData.rmk"
              style="width: auto"
              :disabled="property.disableRmk"
            />
          </el-form-item>
          <el-form-item label="总支出:">
            <el-input
              :value="backendData.dtlData.ttlSpd"
              style="width: auto"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="创建时间:">
            <el-input
              :value="backendData.dtlData.crtTm"
              style="width: auto"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updBoxSwitch = false">取消</el-button>
        <el-button type="primary" @click="reqUpdateUser">{{
          property.button
        }}</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 分页 -->
  <el-pagination
    background
    layout="total, prev, pager, next, jumper"
    :page-count="Math.floor((this.backendData.dataCount + 9) / 10)"
    :total="this.backendData.dataCount"
    v-model:current-page="frontendData.currentPage"
    @current-change="handleCurrentChange"
  />
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      frontendData: {
        queryData: {
          name: "",
          trascStatus: "",
        },
        addData: {
          name: "",
          rmk: "",
        },
        currentPage: 1,
      },
      backendData: {
        listData: null,
        dtlData: {
          name: "",
          rmk: "",
          ttlInc: "",
          ttlSpd: "",
          trascStatus: "",
          crtTm: "",
        },
        dataCount: null,
      },
      addBoxSwitch: false,
      updBoxSwitch: false,
      property: {
        button: "编辑",
        dialogTitle: "用户详情",
        disableRmk: true,
      },
    };
  },
  mounted() {
    this.reqGetUserList();
  },
  watch: {
    addBoxSwitch(value) {
      if (value == false) {
        this.resetAddInput();
      }
    },
    updBoxSwitch(value) {
      if (value == false) {
        this.resetDtlStatus();
      }
    },
  },
  methods: {
    reqAddUser() {
      axios
        .post("/api/addUser", {
          name: this.frontendData.addData.name,
          rmk: this.frontendData.addData.rmk,
        })
        .then((res) => {
          var data = JSON.parse(JSON.stringify(res.data));
          if (data.error == "true") {
            this.showMsg(data.message, "error");
          } else {
            this.showMsg("新增成功", "success");
            this.addBoxSwitch = false;
          }
        });
    },
    reqGetUserList() {
      axios
        .post("/api/getUserList", {
          name: this.frontendData.queryData.name,
          trascStatus: this.frontendData.queryData.trascStatus,
          pageNum: this.frontendData.currentPage,
        })
        .then(
          (res) => (
            (this.backendData.listData = JSON.parse(
              JSON.stringify(res.data.dataList)
            )),
            (this.backendData.dataCount = JSON.parse(
              JSON.stringify(res.data.dataCount)
            ))
          )
        );
    },
    reqGetUserDtl(name) {
      this.updBoxSwitch = true;
      axios
        .post("/api/getUserDtl", {
          name: name,
        })
        .then((res) => {
          this.backendData.dtlData = JSON.parse(JSON.stringify(res.data));
        });
    },
    resetInput() {
      this.frontendData.queryData.name = "";
      this.frontendData.queryData.trascStatus = "";
    },
    reqUpdateUser() {
      if (this.property.button == "编辑") {
        this.property.button = "确定";
        this.property.dialogTitle = "修改用户信息";
        this.property.disableRmk = false;
      } else {
        axios
          .post("/api/updateUser", {
            name: this.backendData.dtlData.name,
            rmk: this.backendData.dtlData.rmk,
          })
          .then((res) => {
            var data = JSON.parse(JSON.stringify(res.data));
            if (data.error == "false") {
              this.showMsg("修改成功", "success");
              this.updBoxSwitch = false;
            }
          });
      }
    },
    reqDeleteUser(name) {
      this.$confirm("确认删除该用户信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios
          .post("/api/deleteUser", {
            name: name,
          })
          .then((res) => {
            var data = JSON.parse(JSON.stringify(res.data));
            if (data.error == "true") {
              this.showMsg(data.message, "error");
            } else {
              this.showMsg("删除成功", "success");
            }
          });
      });
    },
    resetAddInput() {
      this.frontendData.addData.name = "";
      this.frontendData.addData.rmk = "";
    },
    resetDtlStatus() {
      this.property.button = "编辑";
      this.property.dialogTitle = "用户详情";
      this.property.disableRmk = true;
    },
    showMsg(msg, type) {
      ElMessage({
        showClose: false,
        message: msg,
        type: type,
      });
    },
    handleCurrentChange() {
      this.reqGetUserList();
    },
  },
};
</script>

<style scoped>
.el-descriptions {
  margin-bottom: 30px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
